<!--  -->
<template>
  <div class="drawerBox">
    <el-drawer title="模块管理" :visible.sync="dialogShow" ref="addContainerPlateDialog" :size="1000" :before-close="handleClose">
      <div class="dlg-main-box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="官方容器板块" name="1">
            <div class="content-set-u">
              <el-form :inline="true" :model="plateForm" class="demo-form-inline" @submit.native.prevent>
                <el-form-item label="类型" style="margin-bottom: 0px;" prop="plateCateType">
                  <el-select size="mini" v-model="plateForm.plateCateType" placeholder="请选择">
                    <el-option label="全部" :value="0">
                    </el-option>
                    <el-option v-for="cateType in plateCateTypes" :key="cateType.cate" :label="cateType.name"
                      :value="cateType.cate">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称" style="margin-bottom:0;" prop="plateName">
                  <el-input v-model.trim="plateForm.plateName" placeholder="请输入关键字" size="mini"
                    @keyup.enter.native="onSearch" maxlength="100"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                  <el-button type="primary" @click="onSearch" size="mini">搜索</el-button>
                  <el-button type="success" @click="onReset" size="mini">重置</el-button>
                </el-form-item>
              </el-form>
              <div class="plate-list-u">
                <div class="no-data" v-if="plateTypes.length < 1">暂无数据</div>
                <div class="iframe" v-loading="iframeLoading" v-if="plateTypes.length > 0">
                  <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:550px; height:calc(100vh - 80px);"
                    ref="iframeRender"></iframe>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="高级设置" name="2"></el-tab-pane> -->
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import * as WindowType from '@/config/windowtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
// import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    plateTypesFilter () {
      let _this = this
      return function (_plateCateType) {
        return _this.plateTypes.filter(item => _plateCateType === 0 || _plateCateType === item.cateType)
      }
    }
  },
  data () {
    return {
      dialogShow: false,
      direction: 'rtl',
      loading: true,
      activeName: '1',
      plateTypeTheme: null,
      type: 1,
      position: -2,
      formLabelWidth: '120px',
      // 展示排版信息
      plateForm: {
        plateCateType: 0,
        plateName: null
      },
      // 展示排版分类种类
      plateCateTypes: [],
      // 展示排版数据
      plateTypes: [],
      iframeSrc: null,
      iframeLoading: true
    }
  },
  created () {
    this.iframeLoading = true
    VueFunctions.method(WindowType.API_UDIN_MODULES_ONLOAD, () => {
      this.iframeLoading = false
    })

    VueFunctions.method(WindowType.API_UDIN_MODULES_ONLOAD_CALLBACK, (position, identifier) => {
      BackendjsFunctions.addSpublicModule(position, identifier)
      this.dialogShow = false
    })
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      this.type = tab.name
      this.identifier = ''
    },
    show () {
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, '模块管理')
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, '模块管理')
      this.dialogShow = true
      let { plateTypes, plateCateTypes } = BackendjsFunctions.getSpublicModuleStatic()
      this.plateTypes = plateTypes
      this.plateCateTypes = plateCateTypes
      let moduleIds = plateTypes.map(ele => {
        return ele.moduleId
      })
      if (!this.iframeSrc) {
        this.iframeSrc = functions.modulesIframeSrc(moduleIds)
      }
    },
    onSearch () {
      let { plateTypes } = BackendjsFunctions.getSpublicModuleStatic()
      this.plateTypes = plateTypes.filter(item => {
        if (this.plateForm.plateCateType === 0 || item.cateType.indexOf(this.plateForm.plateCateType) !== -1) {
          if (!this.plateForm.plateName || item.moduleName.indexOf(this.plateForm.plateName) !== -1) {
            return item
          }
        }
      })
      let moduleIds = this.plateTypes.map(ele => {
        return ele.moduleId
      })
      if (moduleIds.length > 0) {
        this.iframeSrc = functions.modulesIframeSrc(moduleIds)
      }
    },
    onReset () {
      this.plateForm = {
        plateCateType: 0,
        plateName: null
      }
      let { plateTypes } = BackendjsFunctions.getSpublicModuleStatic()
      this.plateTypes = plateTypes
      let moduleIds = plateTypes.map(ele => {
        return ele.moduleId
      })
      this.iframeSrc = functions.modulesIframeSrc(moduleIds)
    },
    handleClose (done) {
      if (this.plateForm.plateCateType || this.plateForm.plateName) {
        this.plateForm = {
          plateCateType: 0,
          plateName: null
        }
        this.iframeSrc = null
        done()
      } else {
        done()
      }
    },
    // 关闭弹出层
    close () {
      this.dialogShow = false
    }
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
.drawerBox /deep/ .el-drawer__header {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}
.dlg-main-box {
  padding: 10px 20px 0;
}
.dlg-main-box /deep/ {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .is-horizontal {
    display: none;
  }
}
.plate-list-u {
  margin-top: 10px;
  height:calc(100vh - 175px);
  overflow: hidden;
  .no-data{
    font-size: 16px;
    text-align: center;
    line-height: 80px;
    color: #999;
  }
  .iframe {
    width: 1200px;
    transform: scale(0.8);
    transform-origin: 0 0;
  }
}
</style>
